<template>
  <div class="count">
    <h1>我是Count组件</h1>
    <p>count的值是{{ count }}</p>
    <p>doubleCount的值是{{ doubleCount }}</p>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  name: "Count",

  mounted() {
    console.log(this);
    // console.log(this.$store.state.count);
  },

  /* 
    computed:{
      count(){
        return this.$store.state.count
      }
    } 
  */

  // mapState的写法1：
  // computed: mapState({
  //   count: "count",
  // }),

  // mapState的写法2：
  // computed:mapState(["count"])

  //如果我们当前组件有自己的计算属性,还要额外的添加计算属性,我们可以
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["doubleCount"])
  },
};
</script>

<style scoped>
.count {
  background: hotpink;
}
</style>